import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, ResponsiveGrid, Button, Icon } from '@alifd/next';
import { t } from '@lingui/macro';
import { useHistory } from 'react-router';
import { useStore } from '@/hooks';

import TopList from './TopList';
import PieGroup from './PieGroup';
import SceneBar from './SceneBar';
import PriceLine from './PriceLine';

const { Cell } = ResponsiveGrid;

const Index = () => {
  const [data, steData] = useState();
  const [active, steActive] = useState();
  const history = useHistory();
  const { activityStore: store } = useStore();

  useEffect(() => {
    (async () => {
      const res = await store.getActivesStatistic({ data: { sceneType: 'activity', type: 'activity' } });
      const res2 = await store.getActivesList({
        data: { sceneType: 'activity', type: 'activity' },
        pg: { page: 0, size: 10 },
      });
      steData(res);
      steActive(res2);
    })();
  }, []);
  return (
    <ResponsiveGrid gap={20} style={{ height: '100%' }}>
      <Cell colSpan={12} style={{ height: '100%' }}>
        <Box direction="row" align="center" margin={10}>
          <Button type="normal" onClick={() => { history.goBack(); }} style={{ marginLeft: '-10px', border: 0 }}>
            <Icon type="arrow-left" style={{ padding: 6, border: '1px solid #ccc', borderRadius: '50%', color: 'var(--btn-pure-primary-bg)' }} />
          </Button>
          <div>{t`<< 返回活动管理`}</div>
        </Box>
        <TopList data={data} active={active} />
        <PriceLine data={data} active={active} />
        <SceneBar data={data} active={active} />
        <PieGroup data={data} active={active} />
      </Cell>
    </ResponsiveGrid>
  );
};

export default observer(Index);
